<!--新闻资讯-->
<template>
	<view>
		<!--图片轮播-->
		<tm-carousel
		@click="toLinks(banner[$event])"
		v-if="banner.length>0" 
		rang-key="image"
		text-key="title"
		autoplay model="dot" :margin="[0, 0]" :padding="[0, 0]" align="right" :round="0" :width="750"
		:height="409" :list="banner">
		</tm-carousel>
		<!--分类-->
		<view v-if="category.length>0" class="white px-28 c_xuan flex flex-row flex-row-center-start">
			<view v-for="(item,index) in category" :key="index" @click="tabsChange(item.id)" :class="[tabsTitleKey == item.id ? 'on' : '']" class="c_tablist">{{ item.title }}</view>
		</view>
		<!--资讯列表-->
		<view v-if="list.length>0" class="pt-31">
			<block v-for="(item,index) in list" :key="index">
				<!--有图片列表-->
				<navigator :url="'../news/xiangqing?id='+item.id" v-if="item?.image" class="mx-24 c_bordr-b-1 pb-29 mb-24 flex flex-row flex-row-center-start">
					<view class="c_xwimg flex-shrink">
						<tm-image :round="3" :width="234" :height="176" :src="item.image"></tm-image>
					</view>
					<view class="ml-24 flex-1 flex flex-col" style="align-self: stretch;">
						<view class="flex-1">
							<view class="text-size-g c_danhei c_hight text-overflow-2 flex-1">{{ item.title }}</view>
						</view>
						<view class="c_qianhui text-size-n mt-12">{{ item.created_at }}</view>
					</view>
				</navigator>
				<!--无图片列表-->
				<navigator :url="'../news/xiangqing?id='+item.id" v-else class="mx-24 c_bordr-b-1 pb-29 mb-24  flex flex-col">
					<view class="flex-1">
						<view class="text-size-g c_danhei text-overflow-2 ">
							{{ item.title }}
						</view>
					</view>
					<view class="c_qianhui text-size-n mt-50">{{ item.created_at }}</view>
				</navigator>

			</block>
		</view>

		<bl-list-layout btn-color="white" @restart-load="resetReq(true); getData()" :status="status"
			:list-len="list.length"></bl-list-layout>
	</view>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue"
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import blListLayout from "@/components/bl-list-layout.vue";
import { apiUr, useReqList } from "@/libs/api";
import { imgHost } from "@/libs/imgHost";
import { useStoreUser } from "@/libs/useStoreUser";
const { status, resetReq, actionHttp, list, setOptions, category, banner } = useReqList();
const user = useStoreUser()
const tabsTitleKey = ref("")//1全部,2通知,3热点新闻,4热门专题
const first = ref(true)
function tabsChange(key: string) {
	tabsTitleKey.value = key;
	resetReq(true);
	getData()

}


onLoad(async () => {
	getData()
})

onPullDownRefresh(() => {
	if (status.isLoading) {
		uni.stopPullDownRefresh();
		return
	}
	resetReq(true);
	getData()
})
onReachBottom(() => {
	if (status.isLoading || !status.isMore) return;
	getData()
})

function getData() {
	uni.showLoading({ title: "...", mask: true })
	actionHttp(apiUr.getNewIndex(), { cid: tabsTitleKey.value }).then(() => {
		uni.stopPullDownRefresh();
		uni.hideLoading()
		user.getUserInfo()
		if(first.value){
			if(category.value.length>0){
				for(let i=0;i<category.value.length;i++){
					if(category.value[i].selected){
						tabsTitleKey.value = category.value[i].id;
						break;
					}
				}
			}
			first.value = false;
		}
	})
}



function toLinks(item: any) {
	let stabs = ["index/index", "chengguo/index", "news/index", "user/index"]
	let isStabs = false;
	for (let i = 0; i < stabs.length; i++) {
		isStabs = item.link.indexOf(stabs[i]) > -1 ? true : false;
		if (isStabs) {
			break;
		}
	}
	try {
		if (isStabs) {
			uni.reLaunch({
				url: item.link
			})
		} else {
			uni.navigateTo({
				url: item.link
			})
		}
	} catch (error) {
		console.error(error)
	}
}


</script>
<style>
page,
body {
	background-color: #F7F7F7;
}
</style>

<style lang="less" scoped>
.c_xuan {
	gap: 40rpx;
	justify-content: space-around;
	height: 88rpx;
	line-height: 88rpx;

	.c_tablist {
		font-size: 30rpx;
		color: #333333;
		height: 100%;

		text {
			display: block;
			position: relative;
			height: 100%;
		}

		&.on {
			color: #0073FF;
			font-weight: bold;
		}
	}
}

.c_xwimg {
	width: 234rpx;
	height: 176rpx;
}



.c_bordr-b-1 {
	border-bottom: 1px solid #D8D8D8;
}
</style>